<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换商品展示</title>
    <link rel="stylesheet" href="HomeWork04.css">
    <script>    //结合 css 改变 class 的属性
    window.onload = function () {
        // 获取所有的 li 和 img
        let ulEle = document.getElementById("tab");
        let liEleArr = ulEle.children;
        let divEle = document.getElementById("products");
        let imgEleArr = divEle.children;
        for (let i = 0; i < liEleArr.length; i++) {
            liEleArr[i].onmouseover = function () {
                for (let i = 0; i < liEleArr.length; i++) {
                    // 1. 将所有的上边框去除，通过改变类名
                    liEleArr[i].className = "";
                }
                // 给当前鼠标指向的修改类名为 active
                this.className = "active";
                // 遍历 imgEleArr 将所有的图片隐藏
                for (let j = 0; j < imgEleArr.length; j++) {
                    imgEleArr[j].className = "";
                }
                // 将当前鼠标指向的对应图片类名改为 show
                imgEleArr[i].className = "show";
            }
        }
    }
    </script>
</head>
<body>
<div class="main">
    <ul class="tab" id="tab">
        <!--设置class属性值为active，为了设置导航栏顶部的红色线条-->
        <li class="active"><a href="javascript:;">母婴用品</a></li>
        <li><a href="javascript:;">厨房用品</a></li>
        <li><a href="javascript:;">美容护肤</a></li>
        <li><a href="javascript:;">生活电器</a></li>
    </ul>
    <div class="products" id="products">
        <!--设置class属性值为show，为了显示出对应的商品图片-->
        <img class="show" src="../images/myyp.png" alt="母婴用品">
        <img src="../images/cfyp.png" alt="厨房用品">
        <img src="../images/mrhf.png" alt="美容护肤">
        <img src="../images/shdq.png" alt="生活电器">
    </div>
</div>
</body>
</html>